<template>
  <div class="article-list">
    <van-pull-refresh
      :success-text="refreshSuccessText"
      :success-duration="1500"
      v-model="isRefreshLoading"
      @refresh="onRefresh"
      >
      <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <article-item
        v-for="(article, index) in articles"
        :key="index"
        :article="article">
      </article-item>
      <!-- <van-cell v-for="(article, index) in articles"
        :key="index"
        :title="article.title" /> -->
    </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/articles'
import ArticleItem from '@/components/article-item'
export default {
  name: 'ArticleList',
  components: {
    ArticleItem
  },
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 数据列表
      articles: [],
      // 控制加载中的 loading 状态
      loading: false,
      // 控制加载结束的状态
      finished: false,
      // 获取下一页数据的时间戳
      timestamp: null,
      // 下拉刷新的 loading 状态
      isRefreshLoading: false,
      // 下拉刷新成功提示文本
      refreshSuccessText: ''
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 监听加载数据事件
    async onLoad () {
      // 1. 请求获取数据
      const { data } = await getArticles({
        // 频道 ID
        channel_id: this.channel.id,
        // 时间戳
        timestamp: this.timestamp || Date.now(),
        // 是否包含置顶文章
        with_top: 1
      })
      // console.log(data)
      // 2. 把数据放到 list 数组中
      const { results } = data.data
      this.articles.push(...results)
      // 3. 设置本次加载状态结束，他才可以判断是否需要加载下一次
      // 否则会永远停在这里
      this.loading = false
      // 4. 数据全部加载完毕
      if (results.length) {
        // 更新获取下一页数据的页码
        this.timestamp = data.data.pre_timestamp
      } else {
        // 没有数据了，把加载状态设置结束，不再触发加载更多
        this.finished = true
      }
    },
    // 监听 下拉刷新触发的事件
    async onRefresh () {
      // 下拉刷新 组件自己就会展示 loading 状态
      // 1. 请求获取数据
      const { data } = await getArticles({
        channel_id: this.channel.id,
        timestamp: Date.now(),
        with_top: 1
      })
      // 2. 把数据放到数据列表中（往顶部追加）
      const { results } = data.data
      this.articles.unshift(...results)
      // 3. 关闭刷新的状态 loading
      this.isRefreshLoading = false
      this.refreshSuccessText = `更新了${results.length}条数据`
    }
  }
}
</script>

<style lang="less" scoped>
.article-list {
  position: fixed;
  left: 0;
  right: 0;
  top: 90px;
  bottom: 50px;
  overflow-y: auto;
}
</style>
